<template>
  <view class="search-history" v-if="searchList.length">
    <view class="history-title">
      <text>{{$t('union.find')}}</text>
      <image
        :src="
          showList
            ? this.asyncImgs.images.eye_icon
            : this.asyncImgs.images.close_eye_icon
        "
        @click="showList = !showList"
        mode="aspectFit"
      />
    </view>
    <view class="history-list" v-if="showList">
      <view
        v-for="(item, index) in searchList"
        :key="index"
        class="list-item"
        @click="handleSearchFind(item.value)"
      >
        {{ item.value }}</view
      >
    </view>
    <view class="search-find-word" v-else> {{$t('search.noFind')}}</view> </view
  > 
</template>

<script>
export default {
  props: {
    searchList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      showList: true,
    };
  },
  created() {},
  computed: {},
  methods: {
    handleSearchFind(item) {
      this.$emit("handleSearchFind", {
        item,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.search-history {
  width: 678rpx;
  margin: 2.67vw auto 0;

  .history-title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    text {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #262626;
    }

    image {
      width: 28rpx;
      height: 28rpx;
      display: block;
    }
  }

  .history-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 20rpx 0 60rpx 0;

    .list-item {
      height: 60rpx;
      background: #f2f2f2;
      border-radius: 30rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #262626;
      line-height: 60rpx;
      text-align: center;
      padding: 0 25rpx;
      margin: 12rpx;
    }

    .list-item:first-child {
      margin-left: 0;
    }
  }

  .search-find-word {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #888888;
    text-align: center;
    margin: 50rpx auto 20rpx;
  }
}
</style>
